<template>
  <div>
    <div class="form-edit-btns">
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddView">
        选择分类
      </el-button>
    </div>
    <el-main style="padding-left: 0px; padding-top: 0px">
      <div class="table-box">
        <el-table
          :data="objs"
          v-loading="tableLoading"
          border
          stripe
          @selection-change="handleSelectionChange"
          size="mini"
          style="width: 100%"
        >
          <el-table-column type="selection" align="left"> </el-table-column>
          <el-table-column prop="content" label="自定义分类名称"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="showEditView(scope.row)" type="text" size="mini">
                查询题库
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          :page-size="10"
          :current-page="currentPage"
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="totalCount"
        >
        </el-pagination>
        <div class="form-edit-btns" style="float: right">
          <el-button
            type="danger"
            size="mini"
            v-if="objs.length > 0"
            :disabled="multipleSelection.length == 0"
            @click="deleteMany"
            >批量删除
          </el-button>
        </div>
      </div>
    </el-main>

    <el-form :model="obj" ref="addForm" style="margin: 0px; padding: 0px">
      <div style="text-align: left">
        <el-dialog
          :title="dialogTitle"
          style="padding: 0px"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <el-form-item label="类型:" prop="quiz_category_id" label-width="100px">
            <el-cascader
              v-model="val2"
              :options="toplist"
              @change="handleChange"
              :props="listchange"
            ></el-cascader>
          </el-form-item>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cancelEidt">取 消</el-button>
            <el-button size="mini" type="primary" @click="add('addForm')"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      toplist: [],
      listchange: {
        label: "className",
        value: "classId",
      },
      val2: "",
      objs: [],
      dialogTitle: "",
      multipleSelection: [],
      totalCount: -1,
      currentPage: 1,
      dialogVisible: false,
      tableLoading: false,
      obj: {
        content: "",
        quiz_category_id: "",
        option_list: "",
        correct_answer: "",
      },
    };
  },
  mounted: function () {
    this.loadObjs();
    this.loadCategoryList();
    this.getFenlei();
  },
  methods: {
    //选择结果
    handleChange(e) {
      //console.log(e);
      this.classId = e[1];
    },
    //獲取分类
    getFenlei() {
      this.postRequest(
        "/back/class/queryPracticeClassList?pageNo=" + this.currentPage + "&pageSize=20"
      ).then((res) => {
        this.toplist = res.data.data;
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteMany() {
      this.$confirm(
        "此操作将删除[" + this.multipleSelection.length + "]条数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          var ids = "";
          for (var i = 0; i < this.multipleSelection.length; i++) {
            ids += this.multipleSelection[i].id + ",";
          }
          this.doDelete(ids);
        })
        .catch(() => {});
    },

    currentChange(currentChange) {
      this.currentPage = currentChange;
      this.loadObjs();
    },

    add(formName) {
      this.dialogVisible = false;
      //console.log(this.val2);
    },
    cancelEidt() {
      this.dialogVisible = false;
      this.emptyObjData();
    },
    showEditView(row) {
      //console.log(row);
      this.dialogTitle = "编辑试题";
      this.obj.content = row.content;
      this.obj.id = row.id;
      this.obj.quiz_category_id = row.quizCategory.id;
      this.option_num = row.quizCategory.option_num;
      this.option_list = [undefined];
      var m = JSON.parse(row.option_list);
      for (let index = 1; index <= this.option_num; index++) {
        this.option_list.push(m[index]);
      }
      this.obj.correct_answer = row.correct_answer;

      this.dialogVisible = true;
    },
    showAddView() {
      this.dialogTitle = "选择分类";
      this.dialogVisible = true;
      var _this = this;
    },
    emptyObjData() {
      this.obj = {
        content: "",
        quiz_category_id: "",
        option_list: "",
      };
      this.option_num = 0;
      this.option_list = [];
    },
  },
};
</script>
<style scoped>
.el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}

.slide-fade-enter-active {
  transition: all 0.8s ease;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>
